<template>
	<view class="numerpage">
		 <view class="pagetab">
		 	<view class="itemtab" :class="tab==1?'act':''" @click="selecttab(1)">
		 		餐后血糖预测
				<view class="line"></view>
		 	</view>
			<view class="itemtab" :class="tab==2?'act':''" @click="selecttab(2)">
				膳食营养
				<view class="line"></view>
			</view>
			<view class="itemtab" :class="tab==3?'act':''" @click="selecttab(3)">
				运动影响
				<view class="line"></view>
			</view>
			<view class="itemtab" :class="tab==4?'act':''" @click="selecttab(4)">
				睡眠质量
				<view class="line"></view>
			</view>
			<view class="itemtab" :class="tab==5?'act':''" @click="selecttab(5)">
				情绪压力
				<view class="line"></view>
			</view>
			<view class="itemtab" :class="tab==6?'act':''" @click="selecttab(6)">
				风险评估
				<view class="line"></view>
			</view>
			
		 </view>
		 <XueTang v-if="tab==1"></XueTang>
		 <view class="foottabbar">
		 	<view class="itemfoot footact">
		 		数字孪生
		 	</view>
			<view class="itemfoot">
				数据
			</view>
			<view class="itemfoot">
				进度
			</view>
			<view class="itemfoot" @click="userinfo">
				
				用户详情
			</view>
		 </view>
	</view>
</template>

<script>
	import XueTang from '@/components/xuetang.vue'
	export default {
		data() {
			return {
				tab:1,
				id:'',
			}
		},  
		components:{
			XueTang
		},
		onLoad(e) {
			this.id=e.id
		},
		methods: {
			userinfo(){
				
				uni.navigateTo({
					url:'/pagesA/userinfo/userinfo?id='+this.id
				})
			},
			selecttab(e){
				this.tab=e
			},
		}
	}
</script>

<style lang="less" scoped>
  .numerpage{
	  width: 750rpx;
	  box-sizing: border-box;
	  padding: 20rpx;
	  padding-bottom: 150rpx;
	  
	  .pagetab{
		  width: 100%;
		  display: flex;
		  align-items: center;
		  overflow-x: auto;
		 position: fixed;
		 left: 0;
		 top: 0;
		  padding-top: 10rpx;
		  background: white;
		  .itemtab{
			  min-width: 180rpx;
			  font-size: 28rpx;
			  text-align: center;
			  font-weight: bold;
			  color: gray;
			   height: 70rpx;
			   
			   .line{
				   width: 90rpx;
				   height: 8rpx;
				   border-radius: 4rpx;
				   margin: 8rpx auto;
			   }
		  }
		  .act{
			  font-size: 30rpx;
			  color: #1a4f8a;
			  .line{
				  background-color: #1a4f8a;
			  }
		  }
		  
	  }
	  
	  .foottabbar{
		  width: 750rpx;
		  position: fixed;
		  background-color: white;
		  height: 150rpx;
		  bottom: 0;
		  left: 0;
		  display: flex;
		  align-items: center;
		  justify-content: space-evenly;
		  z-index: 999;
	
		  .itemfoot{
			  border: 1rpx solid #1a4f8a;
			  color: #1a4f8a;
			  max-height: 70rpx;
			  box-sizing: border-box;
			  border-radius: 35rpx;
			  line-height: 70rpx;
			  padding: 0 26rpx;
			  
		  }
		  .footact{
		  			  background-color: #1a4f8a !important;
		  			  color: white !important;
		  }
	  }
  }
</style>
